import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'
import {
    Cells,
    CellsTitle,
    Cell,
    CellHeader,
    CellBody,
    CellFooter,
    Dialog,
    Input
} from 'react-weui';
import './VideoList.css'


class WatchVedio extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showlink:false,
            linkDetail: [
                {
                    name: "HMI",
                    targetLink: "HMI.mp4"
                },
                {
                    name: "710Utility-1",
                    targetLink: "710Utility-1.mp4"
                },{
                    name: "710Utility-2",
                    targetLink: "710Utility-2.mp4"
                },{
                    name: "Gaugetools",
                    targetLink: "Gaugetools.mp4"
                },{
                    name: "GaugeToolsXL-1",
                    targetLink: "GaugeToolsXL-1.mp4"
                },{
                    name: "GaugeToolsXL-2",
                    targetLink: "/GaugeToolsXL-2.mp4"
                },{
                    name: "InfraLab710e",
                    targetLink: "InfraLab710e.mp4"
                },{
                    name: "Setting the Infralab to run through RS232",
                    targetLink: "Setting_the_Infralab_to_run_through_RS232.mp4"
                },{
                    name: "TM710e",
                    targetLink: "TM710e.mp4"
                }, {
                    name: "TM710e-0307温度",
                    targetLink: "TM710e-0307温度.mp4"
                },  
                
            ],
            showDialog: false,
            dialogBtn: {
                buttons: [
                    {
                        label: '确定',
                        onClick: this.playVideo.bind(this)
                    },
                    {
                        label: '取消',
                        onClick: this.hideDialog.bind(this)
                    }
                ]
            },
            currentURL: '',
            password: '',
            displayHint: false
        }
    };

    hideDialog() {
        this.setState({
            showDialog: false,
        });

    }

    showLink = () => {
        this.setState({
            showlink: !this.state.showlink
        });
    };

    inputPassword = (targetLink) => {
        this.setState({
            showDialog: true,
            displayHint: false,
            password: '',
            currentURL: targetLink
        });

    };

    playVideo = () => {
        if(this.state.password === '654321'){
            this.setState({
                showDialog: false,
                displayHint: false
            });
            let targetLink = '/viewvideo/' + this.state.currentURL;
            this.props.history.push(targetLink);
        }else{
            console.log("password is not right");
            this.setState({
                displayHint: true
            });
        }

    };

    changePassword = (e) => {
        let currentValue = e.target.value;
        //console.log(currentValue);
        this.setState({
            password: currentValue,
            displayHint: false
        });
    }

    render() {
        return (
            <div>
                <Cell className={'titlebar'}>
                    <CellBody style={{ textAlign: 'center' }} className={'titlebarcontent'}>
                        培训视频
                    </CellBody>
                </Cell>
                <Cells>
                    <Cell onClick={this.showLink}>
                        <CellBody className={'cellTitle'}>
                            烟草行业
                        </CellBody>
                        <CellFooter>
                            {
                                this.state.showlink? <img src='/images/jiantou_xia@2x.png' style={{marginRight:'15px', width: '15px', height: '15px'}} /> : <img src='/images/jiantou@2x.png' style={{marginRight:'15px', width: '15px', height: '15px'}} />
                            }
                        </CellFooter>
                    </Cell>
                    { !this.state.showlink? "" :
                        this.state.linkDetail.map(details =>
                      <Cell onClick={this.inputPassword.bind(this, details['targetLink'])}>
                          <CellBody className={'cellLink'}  >
                              {details["name"]}
                          </CellBody>
                      </Cell>
                    )}
                </Cells>

                <Dialog title={''} buttons={this.state.dialogBtn.buttons} show={this.state.showDialog}>
                    <div>
                        <input placeholder={'请填写密码'} style={{width: '100%', height: '30px', cursor: 'none'}} onChange={this.changePassword} value={this.state.password}/>
                        {/*<Input type="tel" placeholder="请填写密码" onChange={this.changePassword} value={this.state.password}/>*/}
                    </div>
                    <div style={{marginTop: '10px', color: 'red'}} className={this.state.displayHint? 'show-hint': 'hide-hint'}>密码不正确</div>
                </Dialog>

            </div>
        );
    }

}

export default withRouter(WatchVedio);
